<template>
  <div class="flex flex-col items-center h-[100vh] explorer">
    <n-back-top :right="100" />
    <div class="lunbo w-full">
      <n-carousel autoplay class="h-[400px]">
        <img
          class="carousel-img"
          src="../../../assets/images/202112171042577177.jpg"
        />
        <img
          class="carousel-img"
          src="../../../assets/images/202112172134277432.jpg"
        />
      </n-carousel>
    </div>
    <div class="list flex flex-wrap mt-5">
      <div
        v-for="item in treeData"
        :key="item.id"
        class="h-[40px] px-3 py-2 option-border text-[16px] flex justify-center items-center"
        :class="{ active: item.id === activeExamId }"
        @click="handleNavClick(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="mt-2">
      <!-- exam显示后两层 -->
      <div
        class="exam mt-4 mb-4"
        v-for="item in treeData"
        :key="item.id"
        :ref="setExamRef"
        :id="item.id"
      >
        <div class="header text-[20px] mb-3">{{ item.name }}</div>
        <div class="list flex flex-wrap">
          <div
            class="item w-[260px] h-[210px] mr-3 border-gray-200 border-1 flex flex-col items-center justify-center"
            v-for="v in item.children"
            :key="v.id"
            @click="handleToDetail(v.id)"
          >
            <n-image
              class="w-[230px] h-[160px]"
              :src="buildPicUrl(v.pic || 'xxx')"
              :fallback-src="failPng"
              lazy
            ></n-image>
            <div>{{ v.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">111</div>
  </div>
</template>

<script setup lang="ts">
import { getExamByPage } from '@/api/exam'
import type { ExamRes } from '@/types/exam'
import { arrayToTree } from '@/utils'
import { buildPicUrl } from '@/utils/commonBusiness'
import failPng from '@/assets/images/R-C.png'
const examList = ref<ExamRes[]>([])
const treeData = ref<any[]>([])
const router = useRouter()

onMounted(() => {
  loadAllExams()
})

const loadAllExams = () => {
  getExamByPage({
    page: 1,
    pageSize: 9999
  }).then((res) => {
    examList.value = res.data.items
    // 转换为树形结构
    treeData.value = arrayToTree(examList.value, 'pid', '-1')
    if (treeData.value.length) {
      activeExamId.value = treeData.value[0].id
    }
  })
}

const examRefs = ref<any[]>([])

const setExamRef = (el: any) => {
  if (el) {
    examRefs.value.push(el)
  }
}

const scrollToExam = (examId: any) => {
  console.log(examRefs.value, 'xxx')

  const examElement = examRefs.value.find((exam) => exam.id === examId)
  if (examElement) {
    nextTick(() => {
      examElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
    })
  }
}

const activeExamId = ref('')
const handleNavClick = (examId: any) => {
  activeExamId.value = examId
  scrollToExam(examId)
}

const handleToDetail = (id: string) => {
  router.push({
    name: 'examDetail',
    query: {
      examId: id
    }
  })
}
</script>

<style scoped lang="scss">
.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.explorer {
  overflow: auto;
}

.option-border {
  cursor: pointer;
  border: 1px solid #f00;
  color: #f00;
  border-right: none;

  &:last-child {
    border: 1px solid #f00;
  }

  &.active {
    color: #fff;
    background-color: #f00;
  }
}
</style>
